<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<title>ControlPad</title>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
		<meta name="MobileOptimized" content="240">
		<meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0">
		<style type="text/css">
			body,button,div,form,h1,h2,h3,h4,h5,h6,hr,html,input,li,ol,p,ul{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-user-select:none;-webkit-tap-highlight-color: transparent;outline:0;}
			body{font:20px/1.5"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3",FontVsoicon,sans-serif;background: #f1f1f1;}
			button{width:100%;font-size:16px;border:1px;background:cornflowerblue;line-height:40px;margin:5px 10px 7px;color:aliceblue;box-shadow:1px 1px 2px 0px #888888;border-radius:4px;}
			input[type=text]{width:98%;padding:0 0 0 10px;line-height:45px;font-size:16px;border-left:0;border-style:outset;border-right:0;border-top: 0;background: floralwhite;}
			li{border-top:2px solid #f1f1f1;border-left:10px solid #34d6f1;padding-left:10px;line-height:40px;}
			li:first-child{border-top:0;}
			li>img{float:right;top:8px;position:relative;right:10px;width:25px;height:25px;}
			.header{background:#1abc9c;color:white;padding:10px 0;font-size:24px;position:fixed;top:0;width:100%;}
			.line{border-bottom:1px solid #c8c7cc;display:block;margin-top:30px;}
			.footer{margin-top:10px;color:#666;}
			.footer>p{text-shadow:1px 1px 1px #ababab;}
			.center{text-align:center;}
			.title{background:cadetblue;color:cornsilk;padding-left:5px;}
			.content{background:floralwhite;}
			.left{float:left;}
			.block{display:block;}
			.flex{display:flex;}
			.enabled{background:cornflowerblue;color:aliceblue;}
			.disabled{background:#cccccc;color:aliceblue;}
			.small{font-size:16px;}
			.darkred{background:#bd5151;}
			.textshadow{text-shadow:1px 1px 1px #4e4e4e;}
			.led_status{width:300px;height:300px;}
		</style>
	</head>
	<body>
		<header>
			<div class="header center">ControlPad</div>
		</header>
		<div class="section">
			<div class="content center" style="background:#f1f1f1;margin-top:56px;">
				<img id="led" width="300px" height="300px" alt="led_status" />
			</div>
		</div>
		<div class="section">
			<div class="title textshadow">
				<label>Relay</label>
			</div>
			<div class="content">
				<div class="flex" style="padding:5px;">
					<button id="auto" class="enabled" onclick="doQueryChangeMode('auto');">Auto</button>
					<button id="manual" class="disabled" onclick="doQueryChangeMode('manual');">Manual</button>
				</div>
				<div class="flex" style="padding:5px;">
					<button id="turn" class="darkred" onclick="doQueryTurnLight();">Turn On</button>
				</div>
			</div>
		</div>
		<div class="section">
			<div class="title textshadow">
				<label>Network</label>
			</div>
			<div class="content center">
				<input id="ssid" type="text" placeholder="SSID" />
				<input id="password" type="text" placeholder="Password" />
				<div class="flex" style="padding:5px;margin-top:10px;">
					<button id="ap" onclick="doQuerySetApMode();">AP</button>
					<button id="sta" onclick="doQuerySetStaMode();">Station</button>
				</div>
			</div>
		</div>
		<div class="section">
			<div class="title textshadow">
				<label>Infomation</label>
			</div>
			<div class="content small">
				<ul>
					<li>
						<label id="ap_address">AP</label>
						<img />
					</li>
					<li>
						<label id="sta_address">STA</label>
						<img />
					</li>
				</ul>
			</div>
		</div>

		<div class="line"></div>

		<script language="javascript">
			window.onload = function() {
				set_search_image();
				set_led_image("off");

				var delay = setInterval(doQueryGetStatus, 1000);

				function doQueryGetStatus() {
					query_command();
					clearInterval(delay);
				}

				<!--websocket.init();-->
			}

			function doQueryTurnLight() {
				query_command("turn_light");
			}

			function doQueryChangeMode(mode) {
				query_command("change_mode_to_" + mode);
			}

			function doQuerySetApMode() {
				query_command("set_ap_mode");
			}

			function doQuerySetStaMode() {
				query_command("set_sta_mode");
			}

			function getYear() {document.write(new Date().getFullYear());}
		</script>

		<div class="footer center small">
			<p>&copy;<script language="javascript">getYear();</script> Walkline Studio</p>
		</div>

		<script language="javascript" src="./js/main.js"></script>
	</body>
</html>